<template>
    <div class='switch-theme'>
        <div class="box" @click="showPopup">
            <i class="iconfont icon-pifu"></i>
            <span class="text">换肤</span>
        </div>
        <van-popup 
            v-model="show" 
            position="right" 
            :style="{width:'40%',height:'100%'}"
            get-container="body"
        >
            <div class="theme-list">
                <div class="list">
                    <div class="scroll">
                        <div class="item" 
                            :class="[themeClass == item.name ? 'active' : '']"
                            v-for="(item,index) in themes" 
                            :key="index" 
                            @click="switchTheme(item)"
                        >
                            <i class="iconfont icon-pifu" :style="{color:item.color}"></i>
                            <span class="text">{{item.label}}</span>
                        </div>
                    </div>
                </div>
                <van-button type="primary" @click="show=false">关闭</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import colors from "@/style/theme/colors.json"
import {mapGetters} from "vuex"
export default {
    name: '',
    data() { 
        return {
            show:false
        }
    },
    computed:{
        ...mapGetters(['themeClass']),
        themes(){
            let list = [];
            for(let k in colors){
                let item = colors[k];
                list.push(item);
            }
            return list;
        }
    },
    props: {

    },
    components:{
    },
    mounted() {
    },
    methods:{
        showPopup(){
            this.show = true;
        },
        // 切换主题
        switchTheme(item){
            this.$store.commit("app/swithcTheme",item.name);
        }
    },
}
</script>

<style lang='scss' scoped>
.switch-theme{
    .box{
        display:flex;
        align-items: center;
        line-height: 1;
        .iconfont{
            display:block;
            font-size:0.4rem;
        }
        .text{
            display:block;
            margin-left:0.15rem;
            font-size:0.34rem;
        }
    }
}
.theme-list{
    height:100%;
    display:flex;
    flex-direction: column;
    .list{
        flex:1;
        overflow: hidden;
        .scroll{
            height:100%;
            overflow: auto;
        }
        .item{
            display:flex;
            align-items: center;
            padding:15px;
            font-size:0.34rem;
            .iconfont{
                display: block;
                margin-right:10px;
            }
        }
    }
    .van-button{
        border-radius: 0;
        height:50px;
    }
}
</style>